<template>
 <div class="tab-content">
   <section v-for="(item,index) in arr" :key="index">
      <div class="tab-icon"></div>
      <div class="tab-text">{{item.a}}</div>
   </section>
 </div>
</template>

<script>
import {
  getLastVideo
} from '@/api/home'
export default {
  data () {
    return {
      arr: [
        {a: 1},
        {a: 1},
        {a: 1},
        {a: 1},
        {a: 1}
      ]
    }
  },
  created () {
    this.getaudio()
  },
  methods: {
    getaudio () {
      alert(123321)
      getLastVideo().then(res => {
        console.log(res)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.tab-content{
  width: calc(100vw * 670 / 750);
  margin: 0 auto 15px auto;
  display: flex;
  section{
    flex: 1;
    text-align: center;
  }
}
.tab-icon{
  width: calc(100vw * 70 / 750);
  height: calc(100vw * 70 / 750);
  overflow: hidden;
  border-radius: 50%;
  margin: 0 auto;
  background-color: #fcc;
}
.tab-text{
  margin-top: 6px;
  width: 100%;
  text-align: center;
}
</style>
